<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <img
        src="https://tse1-mm.cn.bing.net/th/id/OIP-C.duz6S7Fvygrqd6Yj_DcXAQHaF7?pid=ImgDet&rs=1"
        alt=""
      />
      <!-- v-bind:元素 元素的属性绑定 -->
      <img v-bind:src="src" alt="" />
      <!-- 简写 ： -->
      <img :src="src" alt="" />

      <!-- v-on 元素事件的绑定 -->
      <button v-on:click="log1">log1</button>
      <!-- 简写 @ -->
      <button @click="log2">log2</button>

      <button @click="change">change</button>
    </div>
  </body>
  <script>
    let vm = new Vue({
      // 控制区域
      el: "#app",
      // 存放数据 m
      data: {
        src: "https://tse1-mm.cn.bing.net/th/id/OIP-C.duz6S7Fvygrqd6Yj_DcXAQHaF7?pid=ImgDet&rs=1",
        msg: "hello vue",
        html: "<a href:'#'>123</a>",
      },
      // 存放方法 m
      methods: {
        log1: function () {
          console.log("aasd");
        },
        // 简写
        log1() {
          console.log("asdasd");
        },
        log2() {
          console.log("asdasd");
        },
        change() {
          // this 指向vue实例
          console.log(this.src);
          if (this.src) {
            this.src = "";
          } else {
            this.src =
              "https://tse1-mm.cn.bing.net/th/id/OIP-C.duz6S7Fvygrqd6Yj_DcXAQHaF7?pid=ImgDet&rs=1";
          }
        },
      },
    });
  </script>
</html>
